import React from 'react';
import styles from '@/assets/css/coupon-info.module.css';
import type business from '@/types/business';
import type { coupon } from '@/types/coupon';

const CouponInfo = () => {
  const [business] = useState<business>(React.business);
  const [info, SetInfo] = useState<coupon>({} as coupon);
  const [searchParams] = useSearchParams();
  const [couponid] = useState<string | number>(searchParams.get('couponid') ?? '');

  // 获取优惠券详情数据
  const fetchData = async () => {
    // 组装参数
    const params = {
      busid: business?.id,
      couponid
    };
    // 发起请求
    const result = await React.Http.post('/coupon/info', params);
    if (result.code === 1) {
      SetInfo(result.data);
    } else {
      React.fail(result.msg);
    }
  }

  // 挂载前
  useEffect(() => {
    fetchData();
  }, []);

  // 领取按钮
  const ReceiveBtn = () => {
    if (info.receive_status) {
      return (
        <>
          <div className={styles.receive}>
            <React.UI.Button size="small" disabled color='primary'>已领取</React.UI.Button>
          </div>
        </>
      )
    } else {
      return (
        <>
          <div className={styles.receive}>
            <React.UI.Button size="small" color='primary' onClick={receive}>领取</React.UI.Button>
          </div>
        </>
      )
    }
  }

  // 领取
  const receive = async () => {
    // 检查登录
    if (!business || Object.getOwnPropertyNames(business).length === 0) {
      React.UI.Dialog.confirm({
        title: '登录',
        content: '是否跳转登录界面？',
        onConfirm: () => {
          React.navigate('/business/login');
        }
      })
      return;
    }
    // 组装参数
    const params = {
      busid: business.id,
      couponid
    }
    // 发起请求
    const result = await React.Http.post('/coupon/receive', params);
    // 处理请求结果
    if (result.code === 1) {
      React.success(result.msg, () => {
        // 更新数据
        SetInfo({ ...info, receive_status: true, total: info.total - 1 })
      });
    } else {
      React.fail(result.msg);
    }
  }

  return (
    <>
      <React.UI.Image src={info.thumb_cdn} height={213} fit='cover' />

      <React.UI.Swiper
        autoplay={true}
        autoplayInterval={3000}
        loop={true}
        indicator={() => false}
        direction='vertical'
        style={{ '--height': '40px', 'border': '0px' }}
      >
        <React.UI.Swiper.Item >
          <React.UI.NoticeBar
            style={{ 'border': '0px' }}
            content='优惠活动正在火热进行中'
            color='info'
          />
        </React.UI.Swiper.Item>
        <React.UI.Swiper.Item >
          <React.UI.NoticeBar
            style={{ 'border': '0px' }}
            content='速抢！手快有手慢无~'
            color='info'
          />
        </React.UI.Swiper.Item>
      </React.UI.Swiper>

      <div className={styles.coupon_detail}>
        <div className={styles.coupon_info}>
          <div className={styles.left}>
            <div className={styles.left_top}>
              <div>
                <span>{parseFloat(info.rate) * 100}</span>折
              </div>
              <div className={styles.top_info}>
                <div>{info.title}</div>
                <div>COUPON</div>
              </div>
            </div>
          </div>

          <ReceiveBtn />
        </div>
        <div className={styles.coupon_prompt}>
          <div className={styles.prompt_title}>温馨提示：</div>
          <div><span>•</span>领取后 {info.createtime_date} 至 {info.endtime_date} 有效</div>
          <div><span>•</span>仅限量 {info.total} 张, 赶快领取! </div>
        </div>
      </div>
    </>
  )
}

export default CouponInfo;